<style lang="less">
@import '../style.less';
</style>
<template>
    <div class="material">
        <div class="op-header">
            <el-button class="add"
                       type="info"
                       @click="addTransaction">
                <i class="el-icon-circle-plus icon-right" />新增模版
            </el-button>
            <div class="search">
                <el-select class="enable-select"
                           :clearable="true"
                           v-model="enabled"
                           placeholder="启用状态">
                    <el-option label="启用"
                               value="true" />
                    <el-option label="停用"
                               value="false" />
                </el-select>
                <el-cascader class="class-select"
                             :clearable="true"
                             change-on-select
                             :show-all-levels="false"
                             :options="transClasses"
                             :props="{ value: 'id', label: 'name', children: 'subClasses' }"
                             v-model="classIds"
                             placeholder="全部分类" />
                <el-input class="search-input "
                          v-model="name"
                          placeholder="请输入查询关键字"
                          prefix-icon="el-icon-search" />
                <el-button class="search-button"
                           type="primary"
                           @click="searchTransactions">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex :rows="transactions"
                  :total="transTotal"
                  :columns="columns"
                  :options="options"
                  :on-option="onClickOption"
                  :on-operation="onClickOperation"
                  :on-page-change="onPageChange" />
        <dialog-ex v-if="dialogMode"
                   :title="dialogMode === 'add' ? '新增交易模版' : '编辑交易模版'"
                   :mode="dialogMode"
                   :form="form"
                   :ctrl-values="{ classIds: this.transClasses }"
                   :init="currentTransaction" />
    </div>
</template>

<script>
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import dialogEx from '@/components/dialog/dialogEx'
    import tableEx from '@/components/table/tableEx'
    import pageConfig from '../config'

    export default {
        name: 'transaction',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                name: '',
                enabled: 'true',
                classIds: [],
                currentTransaction: null,
                dialogMode: null,
                editorMode: null,
                columns: pageConfig.transaction.columns,
                options: pageConfig.transaction.options,
                form: {
                    items: pageConfig.transaction.formItems,
                    default: { enabled: true },
                    actions: {
                        cancel: () => (this.dialogMode = null),
                        confirm: (data, mode) => {
                            this.onConfirm(data, mode)
                            this.dialogMode = null
                        }
                    }
                },
                editorForm: {
                    actions: {
                        cancel: () => (this.editorMode = null),
                        confirm: (data, mode) => {
                            this.onConfirm(data, mode)
                        }
                    }
                }
            }
        },
        computed: {
            ...mapGetters(['transClasses', 'transactions', 'transTotal'])
        },
        created() {},
        mounted() {
            this.loadInitData()
        },
        methods: {
            ...mapActions([
                'getTransClasses',
                'getTransactions',
                'saveTransaction',
                'removeTransactions'
            ]),
            ...mapMutations(['setTransPage']),
            loadInitData() {
                this.getTransClasses()
                this.getTransactions()
            },
            addTransaction() {
                this.dialogMode = 'add'
            },
            searchTransactions() {
                this.setTransPage({
                    number: 1,
                    filter: { name: this.name, enabled: this.enabled, classIds: this.classIds }
                })
                this.getTransactions()
            },
            onClickOption(option, rows) {
                if (option === 'refresh') {
                    this.loadInitData()
                }
                console.log('onClickOption:', option, rows)
            },
            onClickOperation(oper, row) {
                if (oper.prop === 'edit') {
                    this.currentTransaction = row
                    this.dialogMode = 'edit'
                } else if (oper.prop === 'delete') {
                    this.removeTransactions([row.id])
                } else if (oper.prop === 'item_config') {
                    this.editorMode = 'edit'
                } else {
                    console.log('onClickOperation:', oper.label, oper.prop, row)
                }
            },
            onPageChange(number) {
                this.setTransPage({ number })
                this.getTransactions()
            },
            onConfirm(data, mode) {
                console.log('onConfirm:', data, mode)
                this.saveTransaction(data)
            }
        }
    }
</script>